<template>
  <div id="clockin" :style="{'background-image':'url(' + imgHost + 'clock-in/layer.png)'}">
    <c-title :hide="false" :text="clockin_title" totext="我的战绩" ></c-title>
    <div class="clockin-head">
      <div class="head-time">打卡时间 {{ clock_begintime }}：00 - {{ clock_endtime }}：00</div>
      <h3>打卡可随机瓜分金额</h3>
      <h1>{{ totalAmonut }}<span>{{ $i18n.t('元') }}</span></h1>
      <div class="challenge">
        当前有<span>{{ totalNumber }}</span>人参与打卡挑战
      </div>
    </div>
    <router-link :to="fun.getUrl('ClockPunchRule')">
      <div class="clockin-rule">活动<br />规则</div>
    </router-link>
    <div class="clockin-pay" :style="{'background-image':'url(' + imgHost + 'clock-in/button.png)'}" :class="!forbidden?'clockin-font':''" @click="clokinBtnCallBack(btnStatus)" v-if="!forbidden">
      {{ message }}
    </div>
    <div class="clockin-pay" :style="{'background-image':'url(' + imgHost + 'clock-in/button.png)'}" :class="!forbidden?'clockin-font':''" v-else>
      {{ message }}
      <van-count-down :time="cutDownTime" class="time" format="DD天HH时mm分ss秒" @finish="cutDownCallBack" v-if="cutDownTime"></van-count-down>
    </div>
    <van-action-sheet v-model="actionSheetShow" :actions="actionSheetItems" cancel-text="取消" :close-on-click-action="true" />
    <div class="clockin-record">
      <div class="record-head flex-a-c flex-j-sb">
        <h3>打卡状况</h3>
        <router-link :to="fun.getUrl('ClockPunchRecord')">
          <p class="flex flex-a-c" >我的战绩<span class="iconfont icon-icon_more11"></span></p>
        </router-link>
      </div>
      <div class="clockin-content ">
        <div class="flex-a-c flex-j-sb">
          <div class="state-btn flex flex-a-c">
            <div class="circle flex-a-c flex-j-c">
              <img :src="imgHost + 'clock-in/happy.png'" />
            </div>
            <p>{{ clockInNum }}人成功</p>
          </div>
          <div class="state-btn flex flex-a-c">
            <div class="circle flex-a-c flex-j-c">
              <img :src="imgHost + 'clock-in/sad.png'" />
            </div>
            <p>{{ notClockInNum }}人失败</p>
          </div>
        </div>
        <div class="ranking-list flex">
          <div class="record-ranking"  v-if="clockFirstShow && clockFirstMember">
            <div class="ranking-item">
              <div class="ranking-circle flex flex-j-c">
                <div class="circle-big">
                  <!-- <div class="circle-lucency"></div> -->
                  
                </div>
                <div class="circle-picture flex-a-c flex-j-c">
                  <img :src="clockFirstMember.has_one_member.avatar"  />
                </div>
                <div class="circle-title green-gradual">早起之星</div>
              </div>
              <div class="item-wrap">
                <div style="height:100%;" class="flex-desc">
                  <h4>{{ clockFirstMember.has_one_member.nickname }}</h4>
                  <p class="green">{{ clockFirstMember.clock_in_at }}打卡</p>
                </div>
                
              </div>
            </div>
          </div>
          <div class="record-ranking" v-if="luckyMemberShow && luckyMember">
            <div class="ranking-item">
              <div class="ranking-circle flex flex-j-c">
                <div class="circle-big">
                  <!-- <div class="circle-lucency"></div> -->
                  
                </div>
                <div class="circle-picture flex-a-c flex-j-c">
                  <img :src="luckyMember.has_one_member.avatar"  />
                </div>
                <div class="circle-title pink-gradual">幸运之星</div>
              </div>
              <div class="item-wrap">
                <div style="height:100%;" class="flex-desc">
                  <h4>{{ luckyMember.has_one_member.nickname }}</h4>
                  <p class=" pink">{{ luckyMember.amount }}{{ $i18n.t('元') }}</p>
                </div>
                
              </div>
            </div>
          </div>
          <div class="record-ranking" v-if="continueMemberShow && continueMember">
            <div class="ranking-item">
              <div class="ranking-circle flex flex-j-c">
                <div class="circle-big">

                  <!-- <div class="circle-lucency"></div> -->
                  
                </div>
                <div class="circle-picture flex-a-c flex-j-c">
                  <img :src="continueMember.has_one_member.avatar"  />
                </div>
                <div class="circle-title purple-gradual">毅力之星</div>
              </div>
              <div class="item-wrap">
                <div style="height:100%;" class="flex-desc">
                  <h4>{{ continueMember.has_one_member.nickname }}</h4>
                  <p class=" purple">连续{{ continueMember.clock_num }}次</p>
                </div>
                
              </div>
            </div>
          </div>
        </div>
        
      </div>
      
    </div>
    <div class="clockin-height"></div>


    <!-- <van-popup v-model="popupSpecs" position="bottom" >
      <div class="ispaskey">
        <van-password-input
          :value="payarr"
          :focused="popupSpecs"
          @focus="popupSpecs = true"
        />
        <van-number-keyboard
          title="安全键盘"
          v-model="payarr"
          :show="true"
          @blur="popupSpecs = false"
          @input="onInput"
          @delete="onDelete"
        />
      </div>

    </van-popup> -->
    <pay-keyboard :payKeyboardShow.sync="popupSpecs" @complete="onInput"></pay-keyboard>
  </div>
</template>

<script>
import clockin_controller from './clockin_controller';
export default clockin_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.clockin-height {
  height: 2.625rem;
  clear: both;
}
#clockin {
  position: relative;
  background: #B9D752;
  min-height: 100vh;
  height: 100%;
  background-size:contain;
  background-position: center top 2.25rem;
  background-repeat: no-repeat;
  .clockin-head {
    padding:2.5rem 0 0 0;
    .head-time {
      color:#151613;
      font-weight: bold;
      font-size: 0.875rem;
      padding:0 0 0.375rem 0;
    }
    h3 {
      font-weight: 800;
      font-size: 1.75rem;
      color: #0C0C0B;
      padding:0 0 0.375rem 0;
    }
    h1 {
      font-weight: 800;
      font-size: 2.5rem;
      line-height: 2.5rem;
      color:#F91D78;
      padding:0 0 0.5rem 0;
      span {
        font-size: 1.125rem;
        color:#F91D78;
        // padding:0 0 0.875rem 0;
      }
    }
    .challenge {
      display: inline-block;
      background: linear-gradient(96deg, rgba(236, 247, 151, 0.8) 1%, rgba(255, 221, 135, 0.8) 100%);
      border-radius: 0.9375rem;
      border: 0.0625rem solid #FFFFFF;
      font-weight: bold;
      font-size: 0.8125rem;
      line-height: 0.8125rem;
      color: #151613;
      padding:0.5625rem 0.6875rem 0.5625rem 1.0625rem;
      span {
        background: #000000;
        border-radius: 0.3125rem;
        font-weight: bold;
        font-size: 0.8125rem;
        color: #FFFFFF;
        padding:0.0625rem 0.25rem;
        margin:0 0.25rem;
      }
      
    }
  }
 
  .clockin-rule {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 0.6875rem;
    position: absolute;
    top:4.5rem;
    right:0.6875rem;
    font-size: 0.625rem;
    line-height: 0.6875rem;
    color: #FFFFFF;
    padding:0.375rem;
  }
  .clockin-pay {
    width: 14.375rem;
    height: 3rem;
    border-radius: 1.5rem;
    display: inline-block;
    font-weight: 800;
    font-size: 1.125rem;
    color: #FFFFFF;
    text-align: center;
    line-height: 3rem;
    margin:12rem auto 1.25rem auto;
    display: flex;
    align-items:center;
    justify-content: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }
  .clockin-font {
    font-size: 1.125rem;
  }
  .clockin-record {
    margin:0 0.75rem;
    background: linear-gradient(180deg, #F0F9AB 1%, #FFFFFF 21%);
    border-radius: 0.9375rem;
    border: 0.125rem solid #FFFFFF;
    padding:0.875rem 0.875rem 0 0.75rem;
    h3 {
      position: relative;
      font-weight: 800;
      font-size: 1.125rem;
      // line-height: 1.125rem;
      color: #0C0C0B;
      z-index: 1;
      &::after {
        content:'';
        position: absolute;
        left:0;
        bottom:0;
        width: 100%;
        height: 0.6875rem;
        background: linear-gradient(90deg, #DDE66C 3%, #FFDD87 63%, #FFFFFF 97%);
        border-radius: 0.3125rem;
        z-index: -1;
      }
    }
    p {
      font-size: 0.8125rem;
      line-height: 12rpx;
      color: #333333;
      span {
        color: #999;
        line-height: 0.9375rem;
      }
    }
  }
  .clockin-content {
    // padding:1.0625rem 0.8125rem;
    padding:1.375rem 0 1.0625rem 0;
    .state-btn {
      width: calc(50% - 0.3125rem);
      background: rgba(243, 243, 243, 0.8);
      background: #F3F3F3;
      border-radius: 1.75rem;
      padding: 0.625rem;
      box-sizing: border-box;
      .circle {
        width: 2.25rem;
        height: 2.25rem;
        background: #FFFFFF;
        border-radius: 50%;
        img {
          width: 1.5625rem;
          height: 1.5625rem;
          display: block;
        }
      }
      p {
        padding:0 0 0 0.625rem;
        font-size: 0.875rem;
        color: #333333;
      }
    }
    .ranking-list {
      padding:2.625rem 0 0 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-row-gap: 0.75rem;
      .record-ranking {
        &:nth-child(2) {
          .item-wrap {
            background: linear-gradient(180deg, #FECADF 1%, #FEFAFC 100%)!important;
          }
          .circle-big {
            background: linear-gradient(180deg, #fd4e98 1%, #fcca90 100%)!important;
          }
          .circle-picture {
            background: linear-gradient(0deg, #fd4e98, #fcca90)!important;
          }
        }
        &:nth-child(3) {
          .item-wrap {
            background: linear-gradient(180deg, #F2D5FE 1%, #FCF7FE 99%)!important;
          }
          .circle-big {
            background: linear-gradient(0deg, #F5DDFF 1%, #C848FE 100%)!important;
          }
          .circle-picture {
            background: linear-gradient(0deg, #F5DDFF, #C848FE)!important;
          }
        }
        .ranking-item {
          width: 6.25rem; 
          position: relative;
          .ranking-circle {
            .circle-big {
              width: 3.9375rem; 
              height: 3.9375rem; 
              border-radius: 50%; 
              background: linear-gradient(0deg, #D8EB92 1%, #83BA38 100%); 
              -webkit-mask: radial-gradient(transparent, transparent 30px, #000 31px); 
              mask: radial-gradient(transparent 30px, #000 31px);
              position: absolute;
              left:50%;
              transform: translate(-50%,-38%);
              top:0;
              z-index: 0;
             
            }
            .circle-picture {
              width: 3.25rem;
              height: 3.25rem;
              // background: #7DB732;
              border-radius: 50%;
              // border: 0.125rem solid;
              background: linear-gradient(0deg, #D8EB92, #83BA38);
              position: absolute;
              left:50%;
              top:8%;
              transform: translate(-50%,-50%);
              z-index: 2;
              img {
                width:88%;
                height: 88%;
                border-radius: 50%;
                display: block;
              }
            }
            .circle-lucency {
              width: 3.75rem;
              height: 3.75rem;
              position: absolute;
              left:50%;
              top:50%;
              transform: translate(-50%,-50%);
              // background-color: transparent;
              border-radius: 50%;
              z-index: 1;
            }
            .circle-title {
              font-weight: bold;
              font-size: 0.625rem;
              line-height: 0.625rem;
              color: #FFFFFF;
              padding:0.1875rem 0.375rem;
              border-radius: 0.5rem;
            }
          }
          .circle-title {
            position: absolute;
            z-index: 3;
            top:1.375rem;
          }
         
          .item-wrap {
            width: 6.25rem;
            height: 5.3125rem;
            background: linear-gradient(180deg, #D1E7B2 1%, #F6FAEE 100%);
            border-radius: 0.875rem;
            display: flex;
            flex-direction: column;
            .flex-desc {
              display: flex;
              flex-direction: column;
              justify-content: flex-end;
              p {
                padding:0 0 0.5625rem 0;
                line-height: 0.75rem;
              }
              // align-items: flex-end;
            }
            h4 {
              font-weight: bold;
              font-size: 0.6875rem;
              color: #333333;
              padding:0.625rem 0 0.3125rem 0;
            }
            .green {
              color:#61A20D;
            }
            .pink {
              color: #FF2B7B;
            }
            .purple {
              color:#C128FF
            }
          }
          .green-gradual {
            background: linear-gradient(266deg, #B5CE53 1%, #6EB215 95%);
          }
          .pink-gradual {
            background: linear-gradient(266deg, #FFBA78 1%, #FF2B7B 95%);
          }
          .purple-gradual {
            background: linear-gradient(266deg, #FAA5F1 1%, #BF24FF 95%);
          }
        }
      }
    }
  }
}

.ispaskey {
  .van-number-keyboard {
    position: relative;
  }
}

.van-button__text {
  display: flex;
  align-items: center;
}

.van-count-down {
  color: #fff;
  font-size: 1.125rem;
}

</style>
